<template>
	<view class="container">
		<view class="info-box">
			<view class="title-box">
				<view class="title-icon">
					基本信息
				</view>
				<view style="height: 50upx;line-height: 50upx;margin-top:30upx">
					<text class="yticon icon-dui" style="margin-right: 30upx;font-size: 30upx;color: #00BFFF;" @click="saveBaseInfo">保存</text>
				</view>
			</view>
			<view class="list-cell">
				<view class="list-cell-item">
					<view class="item-title">姓名</view>
					<view class="item-info">
						<input type="text" v-model="resumeInfo.name" placeholder="请输入姓名" class="picker_class" />
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">求职状态</view>
					<view class="item-info">
						<view class="picker_class">
							<radio-group v-model="resumeInfo.deleted" @change="handleStateChange">
								<label class="deleted">
									<radio value="1" :checked="resumeInfo.deleted == 1" style="transform: scale(0.6);" />求职中
								</label>
								<label class="deleted">
									<radio value="0" :checked="resumeInfo.deleted == 0" style="transform: scale(0.6);margin-left:10upx" />不求职
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">性别</view>
					<view class="item-info">
						<view class="picker_class">
							<radio-group v-model="resumeInfo.sex" @change="handleSexChange">
								<label class="sex">
									<radio value="0" :checked="resumeInfo.sex == 0" style="transform: scale(0.6);" />男
								</label>
								<label class="sex">
									<radio value="1" :checked="resumeInfo.sex == 1" style="transform: scale(0.6);margin-left:10upx" />女
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">生日</view>
					<view class="item-info">
						<picker @change="bindBirthdayChange" mode="date">
							<view class="picker_class">{{resumeInfo.birthday || '请选择生日'}}</view>
						</picker>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">学历</view>
					<view class="item-info">
						<picker @change="bindEducationChange" :range="eduList">
							<view class="picker_class">{{resumeInfo.education || '请选择学历'}}</view>
						</picker>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">电话</view>
					<view class="item-info">
						<input type="tel" v-model="resumeInfo.telNo" placeholder="请输入手机号码" class="picker_class" />
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">期望岗位</view>
					<view class="item-info">
						<input type="text" v-model="resumeInfo.expectedPosition" placeholder="请输入期望岗位" class="picker_class" />
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">薪资要求</view>
					<view class="item-info">
						<input type="number" v-model="resumeInfo.salary" placeholder="请输入薪资要求" class="picker_class" />
					</view>
				</view>
				<view class="list-cell-last" style="height:150px;display:block">
					<view class="item-title">个人特长</view>
					<view class="item-info" style="width:100%;padding-left: 20upx;">
						<textarea v-model="resumeInfo.specialty" style="height:100px;width:100%;text-align: left;line-height: normal;"
						 placeholder-style="font-size: 30upx;line-height: normal;" placeholder="请输入个人特长" />
						</view>
				</view>
			</view>
		</view>
		<view class="info-box" v-if="flag">
			<view class="title-box">
				<view class="title-icon">
					教育背景
				</view>
				<view style="height: 50upx;line-height: 50upx;margin-top:30upx">
					<text class="yticon icon-dui" style="margin-right: 30upx;font-size: 30upx;color: #00BFFF;"
						@click="saveEducationList">保存</text>
				</view>
			</view>
			<view class="list-cell">
				<view class="list-cell-item">
					<view class="item-title">学校名称</view>
					<view class="item-info">
						<input type="text" v-model="resumeInfo.graduationSchool" placeholder="请输入学校名称"
							class="picker_class" />
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">在校时间</view>
					<view class="item-info">
						<view class="picker_class" @click="openEduTimeRange">{{eduTime || "请选择在校时间"}}</view>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">专业</view>
					<view class="item-info">
						<input type="text" v-model="resumeInfo.major" placeholder="请输入专业" class="picker_class" />
					</view>
				</view>
			</view>
		</view>
		<view class="info-box" v-if="flag">
			<view class="title-box">
				<view class="title-icon">
					工作经历
				</view>
				<view style="height: 50upx;line-height: 50upx;margin-top:30upx">
					<text class="yticon icon-jia2" style="margin-right: 20upx;font-size: 30upx;color: #00AA00;"
						@click="addWorkItem">新增</text>
					<text class="yticon icon-dui" style="margin-right: 30upx;font-size: 30upx;color: #00BFFF;"
						@click="saveWorkList">保存</text>
				</view>
			</view>
			<view class="list-cell-many" v-for="(item,index) in resumeInfo.workList" :key="index"
				@longpress="openDelWorkItemDialog(item,index)">
				<view class="list-cell-item">
					<view class="item-title">公司名称</view>
					<view class="item-info">
						<input type="text" v-model="item.unitName" placeholder="请输入公司名称" class="picker_class" />
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">职务</view>
					<view class="item-info">
						<input type="text" v-model="item.postName" placeholder="请输入职务" class="picker_class" />
					</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">在职时间</view>
					<view class="item-info">
						<view class="picker_class" @click="openCompanyTimeRange(index)">
							{{item.companyTime || "请选择在职时间"}}
						</view>
					</view>
				</view>
				<view class="list-cell-last" style="height:150px;display:block">
					<view class="item-title">工作内容</view>
					<view class="item-info" style="padding-left:20upx;width:100%">
						<textarea v-model="item.remark" style="height:100px;width:100%;text-align: left;"
							placeholder="请输入工作内容" placeholder-style="font-size: 30upx;line-height: normal;" />
					</view>
				</view>
			</view>
		</view>
		<view class="info-box" v-if="flag">
			<view class="title-box">
				<view class="title-icon">
					附件上传
				</view>
				<view style="height: 50upx;line-height: 50upx;margin-top:30upx">
					<text class="yticon icon-dui" style="margin-right: 30upx;font-size: 30upx;color: #00BFFF;"
						@click="saveUploadFiles">保存</text>
				</view>
			</view>
			<view class="list-cell">
				<view class="list-cell-item">
					<view class="item-title">附件</view>
					<view class="item-info" style="text-align: right;">
						<text style="font-size: 30upx;color: #00BFFF;" @click="uploadOpen">选择文件</text>
					</view>
				</view>
				<view style="margin-top: 10upx;">
					<view class="file_list" v-for="(fileItem,fileIndex) in fileList" :key="fileIndex">
						<view
							style="width:calc(100% - 70upx);overflow: hidden;text-overflow: ellipsis;white-space:nowrap;">
							{{fileItem.name}}
						</view>
						<view style="width:60upx;color: #ff5500;" @click="delFile(fileIndex)">删除</view>
					</view>
				</view>
			</view>
		</view>
		
		<wPicker mode="range" startYear="1980" :defaultVal="defaultYears" @confirm="confirmEduDate" class="picker_class" ref="eduTimeRange">
		</wPicker>
		<wPicker mode="range" startYear="1980" :defaultVal="defaultYears" @confirm="confirmCompanyDate" class="picker_class" ref="companyTimeRange">
		</wPicker>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		data() {
			return {
				eduList: [
					"研究生", "一本", "二本", "三本", "专科", "高校新生", "普通高中", "初中", "其他"
				],
				eduTime: "",
				companyTime: "",
				uploadUrl: this.$api.request.apiBaseUrl + 'media/uploadMediaFile/smartserver/H5',
				fileList: [],
				resumeInfo: {
					name: "",
					deleted: 0,
					sex: 0,
					birthday: "",
					education: "",
					telNo: "",
					expectedPosition: "",
					salary: "",

					specialty: "",

					graduationSchool: "",
					dateEntrance: "",
					dateGraduation: "",
					major: "",

					workList: [{
						unitName: "",
						postName: "",
						dateEnter: "",
						dateLeave: "",
						remark: ""
					}],
					enclosures: [{
						name: "",
						url: ""
					}]
				},
				userId: "",
				workIndex: 0,
				flag:false,
				defaultYears:["0","0","0","-","0","0","0"]
			}
		},
		components: {
			wPicker
		},
		onLoad(option) {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				this.userId = userInfo.userUuid
			}
			this.getData()
		},
		methods: {
			getData() {
				let params = {
					userId: this.userId
				}
				this.$api.request.queryResumeByUserId(params, (res) => {
					if (res.body.status.statusCode == 0) {
						this.flag = true
						let vo = res.body.data.vo;
						this.assembleInfo(vo)
					}
				})
			},
			assembleInfo(vo){
				if(vo){
					if(vo.employmentEntity){
						this.resumeInfo.employmentId = vo.employmentEntity.employmentId;
						this.resumeInfo.name = vo.employmentEntity.name;
						this.resumeInfo.sex = vo.employmentEntity.sex;
						this.resumeInfo.birthday = vo.employmentEntity.birthday;
						this.resumeInfo.education = vo.employmentEntity.education;
						this.resumeInfo.telNo = vo.employmentEntity.telNo;
						this.resumeInfo.expectedPosition = vo.employmentEntity.expectedPosition;
						this.resumeInfo.salary = vo.employmentEntity.salary;
						this.resumeInfo.specialty = vo.employmentEntity.specialty;
						this.resumeInfo.deleted = vo.employmentEntity.deleted ? 1 : 0;
					}
					if (vo.studyList.length > 0) {
						let study = vo.studyList[0]
						this.resumeInfo.studyId = study.studyId;
						this.resumeInfo.dateEntrance = study.dateEntrance;
						this.resumeInfo.dateGraduation = study.dateGraduation;
						this.eduTime = study.dateEntrance + "至" + study.dateGraduation;
						this.resumeInfo.major = study.major;
						this.resumeInfo.graduationSchool = study.graduationSchool;
					}
					if (vo.enclosureList.length > 0) {
						let files = []
						for (let i = 0; i < vo.enclosureList.length; i++) {
							let file = {
								name: vo.enclosureList[i].name,
								url: vo.enclosureList[i].url,
							}
							files.push(file)
						}
						this.resumeInfo.enclosures = files;
						this.fileList = files;
					}
					if (vo.workList.length > 0) {
						this.resumeInfo.workList = []
						for (let i = 0; i < vo.workList.length; i++) {
							let work = {
								companyTime: vo.workList[i].dateEnter + "至" + vo.workList[i].dateLeave,
								dateEnter: vo.workList[i].dateEnter,
								dateLeave: vo.workList[i].dateLeave,
								postName: vo.workList[i].postName,
								remark: vo.workList[i].remark,
								unitName: vo.workList[i].unitName,
							}
							if (vo.workList[i].dateEnter === null) {
								work.companyTime = ''
							}
							this.resumeInfo.workList.push(work)
						}
					}
				}
			},
			// 保存基础信息
			saveBaseInfo() {
				if (!this.resumeInfo.name) {
					this.$api.msg("请输入姓名")
					return
				}
				if (!this.resumeInfo.birthday) {
					this.$api.msg("请选择生日")
					return
				}
				if (!this.resumeInfo.education) {
					this.$api.msg("请选择教育背景")
					return
				}
				if (!this.$api.util.validateMobileNo(this.resumeInfo.telNo)) {
					this.$api.msg("请输入正确的手机号")
					return
				}
				if (!this.resumeInfo.expectedPosition) {
					this.$api.msg("请输入期望岗位")
					return
				}
				if (!this.resumeInfo.salary) {
					this.$api.msg("请输入期望薪资")
					return
				}
				if (!this.resumeInfo.specialty) {
					this.$api.msg("请输入特长")
					return
				}

				let params = {
					employmentEntity: {
						employmentId: this.resumeInfo.employmentId,
						name: this.resumeInfo.name,
						sex: this.resumeInfo.sex,
						birthday: this.resumeInfo.birthday,
						education: this.resumeInfo.education,
						telNo: this.resumeInfo.telNo,
						expectedPosition: this.resumeInfo.expectedPosition,
						salary: this.resumeInfo.salary,
						specialty: this.resumeInfo.specialty,
						userId: this.userId
					},
					isDeleted: this.resumeInfo.deleted
				}
				this.$api.request.addOrUpdateResume(params, (res) => {
					if (res.body.status.statusCode == 0) {
						this.$api.msg("保存成功,下拉填写更多信息")
						this.flag = true
					} else {
						this.$api.msg("保存失败")
					}
				})

			},
			// 保存教育背景
			saveEducationList() {
				if (!this.resumeInfo.graduationSchool) {
					this.$api.msg("请输入毕业学校")
					return
				}
				if (!this.eduTime) {
					this.$api.msg("请选择在校时间")
					return
				}
				let list = []
				let item = {
					graduationSchool: this.resumeInfo.graduationSchool,
					dateEntrance: this.resumeInfo.dateEntrance,
					dateGraduation: this.resumeInfo.dateGraduation,
					major: this.resumeInfo.major
				}
				list.push(item)
				let params = {
					userId: this.userId,
					list: list
				}
				this.$api.request.addOrUpdateEducation(params, (res) => {
					if (res.body.status.statusCode == 0) {
						this.$api.msg("保存成功")
					} else {
						this.$api.msg("保存失败")
					}
				})
			},
			// 保存工作经历
			saveWorkList() {
				let params = {
					userId: this.userId,
					list: this.resumeInfo.workList
				}
				this.$api.request.addOrUpdateWork(params, (res) => {
					if (res.body.status.statusCode == 0) {
						this.$api.msg("保存成功")
					} else {
						this.$api.msg("保存失败")
					}
				})
			},
			// 保存附件
			saveUploadFiles() {
				let params = {
					userId: this.userId,
					list: this.fileList
				}
				this.$api.request.addOrUpdateFiles(params, (res) => {
					if (res.body.status.statusCode == 0) {
						this.$api.msg("保存成功")
					} else {
						this.$api.msg("保存失败")
					}
				})
			},
			addWorkItem() {
				if (this.resumeInfo.workList.length > 2) {
					this.$api.msg("最多有3条工作经历")
					return;
				}
				let item = {
					unitName: "",
					postName: "",
					dateEnter: "",
					dateLeave: "",
					remark: ""
				}
				// 在界面添加，等保存时，再统一添加
				this.resumeInfo.workList.push(item)
			},
			openDelWorkItemDialog(workItem, index) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: "确认删除该条记录吗",
					success: function(res) {
						if (res.confirm) {
							_this.delWorkItem(workItem, index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			delWorkItem(workItem, index) {
				if (this.resumeInfo.workList.length < 2) {
					this.$api.msg("至少要有一条工作经历")
					return;
				}
				// 在界面删除，等保存时，再统一添加
				this.resumeInfo.workList.forEach((item, i) => {
					if (i == index) {
						this.resumeInfo.workList.splice(index, 1);
					}
				});
			},
			confirmEduDate(e) {
				this.eduTime = e.result;
				this.resumeInfo.dateEntrance = e.from;
				this.resumeInfo.dateGraduation = e.to
			},
			confirmCompanyDate(e) {
				this.resumeInfo.workList[this.workIndex].companyTime = e.result;
				this.resumeInfo.workList[this.workIndex].dateEnter = e.from;
				this.resumeInfo.workList[this.workIndex].dateLeave = e.to
				this.$forceUpdate();
			},
			bindBirthdayChange(e) {
				this.resumeInfo.birthday = e.detail.value
			},
			bindEducationChange(e) {
				this.resumeInfo.education = this.eduList[e.detail.value]
			},
			handleStateChange(e) {
				this.resumeInfo.deleted = e.detail.value
			},
			handleSexChange(e) {
				this.resumeInfo.sex = e.detail.value
			},
			openEduTimeRange() {
				// 设置默认值
				if(this.resumeInfo.dateEntrance && this.resumeInfo.dateGraduation){
					this.initDateDefault(this.resumeInfo.dateEntrance,this.resumeInfo.dateGraduation)
				}else{
					this.defaultYears = ["0","0","0","-","0","0","0"]
				}
				this.$refs.eduTimeRange.show();
			},
			openCompanyTimeRange(index) {
				this.workIndex = index;
				if(this.resumeInfo.workList[this.workIndex].dateEnter && this.resumeInfo.workList[this.workIndex].dateLeave){
					this.initDateDefault(this.resumeInfo.workList[this.workIndex].dateEnter,this.resumeInfo.workList[this.workIndex].dateLeave)
				}else{
					this.defaultYears = ["0","0","0","-","0","0","0"]
				}
				this.$refs.companyTimeRange.show();
			},
			delFile(fileIndex) {
				this.fileList.forEach((item, i) => {
					if (i == fileIndex) {
						this.fileList.splice(fileIndex, 1);
					}
				});
			},
			// 参数格式  yyyy-MM-dd
			initDateDefault(startTime,endTime){
				let startDateArray = startTime.split("-");
				let endDateArray = endTime.split("-");
				let startYear = Number.parseInt(startDateArray[0]) - 1980;
				let startMonth = Number.parseInt(startDateArray[1]) - 1;
				let startDay = Number.parseInt(startDateArray[2]) - 1;
				let endYear = Number.parseInt(endDateArray[0]) - 1980;
				let endMonth = Number.parseInt(endDateArray[1]) - 1;
				let endDay = Number.parseInt(endDateArray[2]) - 1;
				let result = [startYear,startMonth,startDay,"-",endYear,endMonth,endDay]
				this.defaultYears = result;
				this.$set(this.defaultYears,0,startYear)
			},
			uploadOpen() {
				let _this = this;
				uni.chooseFile({
					type: 'all',
					count:1,
					success: function(chooseFileRes) {
						console.log(chooseFileRes)
						const tempFilePaths = chooseFileRes.tempFiles;
						if (_this.fileList.length > 2) {
							_this.$api.msg("最多上传3个附件")
							return;
						}
						if (tempFilePaths[0].size < 1024 * 1024 * 10) {
							uni.showLoading({
								title: '上传中...'
							});
							uni.uploadFile({
								url: _this.uploadUrl,
								filePath: tempFilePaths[0].path,
								name: 'file',
								headers: {
									'Accept': 'application/json',
									'content-type': 'multipart/form-data',
								},
								success: (uploadFileRes) => {
									if (uploadFileRes.statusCode == "200") {
										let fileItem = {
											name: tempFilePaths[0].name,
											url: uploadFileRes.data
										}
										_this.fileList.push(fileItem)
									}
								},
								fail: (error) => {
									console.log(error)
									if (error && error.response) {
										_this.$api.msg("上传失败")
										setTimeout(function() {
											uni.hideLoading();
										}, 250);
									}
								},
								complete: (res) => {
									console.log(res)
									setTimeout(function() {
										uni.hideLoading();
									}, 250);
								}
							});
						}
					}
				});
			},

		}
	}
</script>
<style lang='scss'>
	page {
		background: $page-color-base;
	}

	.info-box {
		width: calc(100% - 40upx);
		margin: 20upx;
		background-color: white;
		border-radius: 20upx;
		overflow: hidden;
	}

	.title-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.user-info-box {
		margin-top: 40upx;
		padding-left: 40upx;
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $font-sm;
			color: $font-color-base;
			margin-left: 20upx;
		}
	}

	.picker_class {
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.user-info-contain {
		margin-left: 40upx;
		width: 70%;
		color: white;
	}

	.user-name-contain {
		font-size: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}


	.list-cell {
		padding: 30upx;

		.list-cell-item {
			height: 90upx;
			line-height: 90upx;
			border-bottom: 1px solid #e9eef5;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				width: 140upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				width: calc(100% - 140upx);
				text-align: right;
				margin-right: 20upx;
			}
		}

		.list-cell-last {
			height: 90upx;
			line-height: 90upx;
			display: flex;
			width: 100%;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				line-height: 90upx;
				width: 140upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				width: calc(100% - 140upx);
				text-align: right;
				margin-right: 20upx;
			}
		}
	}

	.list-cell-many {
		padding: 30upx;
		border-bottom: 2px solid #e9eef5;

		.list-cell-item {
			height: 90upx;
			line-height: 90upx;
			border-bottom: 1px solid #e9eef5;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				width: 140upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {

				text-align: right;
				margin-right: 20upx;
			}
		}

		.list-cell-last {
			height: 90upx;
			line-height: 90upx;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				width: 140upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				width: calc(100% - 140upx);
				text-align: right;
				margin-right: 20upx;
			}
		}
	}

	.title-icon {
		background-color: #00BFFF;
		color: white;
		font-weight: bold;
		font-size: 30upx;
		padding-left: 20upx;
		width: 160upx;
		border-top-right-radius: 30upx;
		height: 50upx;
		border-bottom-right-radius: 30upx;
		line-height: 50upx;
		margin-top: 30upx;
	}

	.textarea-placeholder {
		line-height: 60upx;
	}

	.button_class {
		position: fixed;
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1DA3EE !important;
		color: white
	}


	.file_list {
		width: 100%;
		padding: 0 20upx;
		height: 60upx;
		line-height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
